<template>
	<web-view v-if="url" :src="url"></web-view>
	<view class="div" v-else>
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar title="开通会员" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!--#endif  -->
		<view class="box">
			<view class="bgimg">
				<view style="position: absolute;right: 70rpx;top: 45rpx;">
					<fui-icon @click="vipInstructions" size="50" color="#FFB703" name="help"></fui-icon>
				</view>

				<view class="bg">
					<view class="left">
						<view class="avatar">
							<fui-avatar size="large" :src="userInfo?.avatar"></fui-avatar>
						</view>
						<view class="userInfo">
							<view class="name">
								{{userInfo?.nickname}}
							</view>
							<view class="level" style="width: 150rpx;" v-if="userInfo?.vipPower">
								<view style="display: flex;align-items: center;">
									<image style="width: 50rpx;height: 50rpx;"
										src="@/static/images/member/icon_vip_3x.png" mode=""></image>
								</view>
								<view style="font-size: 24rpx;">
									{{userInfo?.vipPower?.vip_name}}
								</view>
							</view>
						</view>
					</view>
					<view class="km" @click="km" v-if="false">
						卡密激活
					</view>
					<fui-modal :buttons="[]" width="600" maskClosable :show="kmshow" @cancel="kmcolse">
						<text class="fui-title">卡密激活</text>
						<view style="margin-top: 30rpx;">
							<fui-input background-color="#f1f4fa" inputBorder radius="50" :bottomLeft="0" borderTop
								placeholder="请输入卡密" v-model="text"></fui-input>
						</view>
						<fui-button text="立即激活" width="240rpx" height="72rpx" :size="28" radius="36rpx" borderWidth="0"
							:margin="['48rpx','0','24rpx']" @click="kmCancel">
						</fui-button>
					</fui-modal>
					<!-- <view class="icon">
					<image style="width: 100rpx;height: 100rpx;" src="/static/images/member/icon_vip_3x.png" mode="">
					</image>
				</view> -->
				</view>
				<view class="time" style="padding-left: 20rpx;color: #fff;font-size: 26rpx;">
					会员有效期：<text style="color: #fff;">{{maTime}}</text>
				</view>
			</view>
			<fui-section style="margin-top: 20rpx;" color="#fd5531" title="请选择会员套餐" isLine></fui-section>
			<view class="tabs" :class="vipList.length<=2?'tabTwo':''">
				<scroll-view scroll-x="true">
					<view class="fui-list">
						<view class="fui-list--item" v-for="(item,index) in vipList" :key="index"
							:class="current==index?'active':''" @click="checkClick(item,index)">
							<view class="tabs-item" :style="{'margin-right':vipList.length<=2?'40rpx':'0rpx'}">
								<view class="tab-name">
									{{item?.vip_name}}
								</view>
								<view class="price">
									￥<text style="font-size: 40rpx;font-weight: 900;">{{item?.vip_price}}</text>
								</view>
								<view class="tim" style="color: #000;font-size: 26rpx;">
									{{item?.vip_time>365?"永久":item?.vip_time+"天"}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="a">
			<view class="">
				<fui-section style="padding: 0;" color="#fd5531" title="专属会员权益" isLine></fui-section>
				<fui-grid :square="false" :showBorder="false" class="grid" :columns="3">
					<fui-grid-item v-for="(item,index) in vipList[current]?.privilege" :key="index" :highlight="false">
						<view class="fui-grid__cell">
							<image style="width: 100rpx;height: 100rpx;" :src="item?.privilege_img" class="fui-icon"
								mode="">
							</image>
							<view class="title" style="font-size: 22rpx;color: var(--fui-color-subtitle);">
								{{item.title}}
							</view>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>
			<view class="button">
				<fui-button @click="openVipdebounce">{{btnMsg}}</fui-button>
			</view>

			<!-- vip提示 -->
			<fui-landscape :show="vipShow" :position="3" @close="vipShow=false">
				<view class="fui-ani__box">
					<view class="fui-flex__center fui-flex__column">
						<view class="fui-ani__title">{{vipShowData?.classify}}</view>
						<view class="fui-desc">
							<rich-text :nodes="vipShowData?.htmlContent"></rich-text>
						</view>
					</view>
				</view>
			</fui-landscape>
			<pay ref="uniPay"></pay>
		</view>
	</view>
</template>

<script setup>
	const payApi = uniCloud.importObject('qc-pay',{
		customUI: true
	})
	const systemApi = uniCloud.importObject('admin-system', { customUI: true })
	import { debounce, formatDate } from "@/utils/index.js"
	import { ConfigStore } from "@/store/modules/config.js";
	import { LoginStore } from "@/store/modules/login.js";
	import { ref, reactive, computed } from 'vue'
	const userInfo = computed(() => (LoginStore().userInfo))
	const config = computed(() => (ConfigStore().config))
	const vipList = computed(() => (ConfigStore().vipList))
	const apiVip = uniCloud.importObject('qc-vip', { customUI: true })
	import { onLoad } from "@dcloudio/uni-app";
	const money = ref(null)
	const btnMsg = ref('立即开通')
	const reminderShow = ref(false)
	//到期时间
	const maTime = computed(() => {
		if(!userInfo?.value?.vipPower){
			return "未开通会员"
		}
		if (userInfo?.value?.vipPower?.vip_name !== '普通会员') {
			return formatDate(userInfo?.value?.vip_opendate + userInfo?.value?.vip_time * 24 * 60 * 60 *
				1000) + '到期'
		} else {
			return "未开通会员"
		}
	})

	//vip攻略
	const htmlContent = ref(null)
	onLoad(async () => {
		init()
	})
	// const setExpiredTime = () => {
	// 	if (userInfo?.value?.vipPower?.vip_name !== '普通会员') {
	// 		maTime.value = formatDate(userInfo?.value?.vip_opendate + userInfo?.value?.vip_time * 24 * 60 * 60 *
	// 			1000) + '到期'
	// 	}
	// }
	const vipShow = ref(false)
	const vipShowData = ref([])
	//vip说明
	const vipInstructions = async () => {
		const res = await systemApi.getAssist({ classify: '开通须知' })
		vipShowData.value = res.data[0]
		vipShow.value = true
	}
	const init = async () => {
		money.value = vipList.value[2].vip_price
		if (vipList?.value[2]?.vip_name == userInfo?.value?.vipPower?.vip_name) {
			btnMsg.value = '续费会员'
		}
	}
	//卡密激活
	const kmshow = ref(false)
	const km = () => {
		kmshow.value = true
	}
	//关闭弹窗
	const kmcolse = () => {
		kmshow.value = false
	}
	//验证卡密
	const kmCancel = () => {

	}
	// #ifdef H5
	const leftClick = () => {
		uni.navigateBack()
	}
	// #endif


	// 选项卡下标
	let current = ref(2)
	const checkClick = (item, i) => {
		if (i == 0) {
			btnMsg.value = '已达到'
		} else if (item?.vip_name == userInfo?.value?.vipPower?.vip_name) {
			btnMsg.value = '续费会员'
		} else {
			btnMsg.value = '立即开通'
		}
		current.value = i
		money.value = vipList.value[i].vip_price
	}
	const uniPay = ref()
	const url = ref()
	//开通会员
	const openVip = async () => {
		if (userInfo?.value?.vipPower?.vip_type == 2) {
			if (vipList?.value[current?.value]?.vip_type == 1) {
				return uni.fui.toast('已达到')
			}
		}
		if (btnMsg.value == '已达到') {
			uni.fui.toast('已达到')
		} else {
			uniPay.value.open({
				data: {
					total_price: money.value,
					isPay: true,
					total_fee: money.value,
					subject: "开通会员",
					body: "开通会员",
					type: "vip",
					custom: vipList.value[current.value]._id //会员类型
				},
				onCreate: res => {
					// 处理支付订单创建成功的逻辑

				},
				onSuccess: async (res) => {
					if (res.code == 0 && res.user_order_success) {
						if (res.orderPaid == false && res.url) {
							const resApi = await payApi.addOrdersLog({
								type_id: vipList?.value[current?.value]?._id,
								user_id: userInfo?.value?._id,
								out_trade_no: res.out_trade_no,
								key:"开通会员"
							})
							if(resApi.id){
								url.value = res.url
							}
						}else{
							try {
								let params = {
									_id: vipList?.value[current?.value]?._id,
									user_id: userInfo?.value?._id,
									out_trade_no: res.out_trade_no
								}
								const resVip = await apiVip.openMember(params)
								uni.fui.toast(resVip.errMsg)
								init()
							} catch (e) {
							
							}
						}
					}
				},
				onFail: res => {
					// 处理支付失败的逻辑

				},
				onCancel: res => {
					// 处理用户取消支付的逻辑

				}
			})
		}
	}
	const openVipdebounce = debounce(openVip, 500)
</script>

<style lang="scss" scoped>
	.fui-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.fui-list--item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 24rpx;
	}

	.fui-list--item:last-child {
		margin-right: 0;
	}

	.fui-ani__box {
		width: 640rpx;
		background: #ff6553;
		border-radius: 24rpx;
		padding: 20rpx;
	}

	.fui-hd__img {
		width: 100%;
		height: 192rpx;
		display: block;
	}

	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding-bottom: 20rpx;
		text-align: center;
		color: #fff;
	}

	.fui-desc {
		width: 95%;
		padding: 20rpx 40rpx 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		max-height: 600rpx;
		overflow: hidden;
		overflow-y: scroll;
		border-radius: 24rpx;
		background-color: #fff;
	}

	.div {
		background-color: #fff;
		min-height: 100vh;
	}

	.bgimg {
		position: relative;
		color: #fff;
		height: 360rpx;
		background-size: 100% 100%;
		border-bottom-left-radius: 10%;
		border-bottom-right-radius: 10%;
		background-image: linear-gradient(to right top, #ff6f49, #ff5a5e);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
	}

	.km {
		background-color: #f96c17;
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0rpx 20rpx;
		border-radius: 25rpx;
	}

	.button {
		padding: 32rpx;
	}

	.fui-grid__cell {
		padding: 20rpx;
		text-align: center;
	}

	.grid {
		padding: 32rpx 0 0 0;
	}

	.con-one {
		font-size: 24rpx;
		color: var(--fui-color-primary);
	}

	.con-two {
		font-size: 24rpx;
		color: var(--fui-color-primary);
	}

	.active {
		border-bottom: 3px solid #fd5531 !important;
		color: #fd5531 !important;
	}

	.a {
		padding: 32rpx;
		background-color: #fff;
	}

	.dayPrice {
		top: -7px;
		position: absolute;
		padding: 5rpx 20rpx;
		background-color: red;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.box {
		background-color: #fff;
	}

	.tabs {
		align-items: center;
		padding: 32rpx 32rpx 0 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.tabTwo {
		margin-top: 20rpx;
		align-items: center;
		padding: 32rpx 32rpx 0 32rpx;
		display: flex;
		justify-content: left;
	}

	.tab-name {
		font-size: 26rpx;
		color: #000;
		padding: 12rpx;
	}

	.price {
		padding: 12rpx;
	}

	.tabs-item {
		width: 18vw;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		padding: 32rpx;
		background-color: #f1f4fa;
		align-items: center;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}

	.time {
		margin-left: 50rpx;
		color: var(--fui-color-primary);
		padding: 12rpx 32rpx 32rpx 32rpx;
	}

	.level {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		color: #000;
		padding: 0rpx 20rpx 0rpx 14rpx;
		border-radius: 50rpx;
	}

	.bg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx;
	}

	.left {
		display: flex;
	}

	.name {
		font-size: 40rpx;
		font-weight: 900;
	}

	.userInfo {
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
</style>